<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Template • TodoMVC</title>
	<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
	<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
	<!-- CSS overrides - remove if you don't need it -->
	<link rel="stylesheet" href="css/app.css">
</head>

<body>
	<!-- 挂载元素 -->
	<section class="todoapp" id="app">
		<!-- 顶部事项输入框 -->
		<header class="header">
			<!-- 标题 -->
			<h1>todos</h1>
			<!-- 输入框
			使用v-model双向绑定输入框value
			添加回车键盘抬起事件，当回车键抬起执行操作
			-->
			<input class="new-todo" placeholder="What needs to be done?" autofocus v-model.trim="newTodo"
				@keyUp.enter="addNewTodo">
		</header>
		<!-- 中间事项展示区域，在这里使用v-show控制一下显示和隐藏，当事项列表为空则隐藏该区域 -->
		<section class="main" v-show="todos.length">
			<!-- 事项多选按钮
				在按钮上进行v-model双向绑定，绑定到计算属性toggleAll
				toggleAll会自动判断是否当前任务全部勾选了
				如果全部勾选了此按钮也会选中，否则不会选中
			-->
			<input id="toggle-all" class="toggle-all" type="checkbox" v-model="toggleAll">
			<label for="toggle-all">Mark all as complete</label>
			<!-- 事项列表，所有事项寻出在ul的li中 -->
			<ul class="todo-list">
				<!-- 事项v-for结构
					这里使用v-for循环便利todos事项列表
					根据todos的completed动态修改类名
					用item和当前编辑事项做对比，如果却认为当前编辑事项，则添加editing类名
				-->
				<li v-for="item in returnTodos" :key="item.id" :class="{completed:item.completed,editing:item === editing}">
					<!-- 事项本体 -->
					<div class="view">
						<!-- 事项单选框，使用v-model双向绑定数据completed -->
						<input class="toggle" type="checkbox" v-model="item.completed">
						<!-- 这里书写事项内容文本 ， 这里添加鼠标双击，实现鼠标双击把当前的item设置为当前编辑item，用来控制li是否添加editing类名 -->
						<label @dblclick="dbclickLabel(item)">{{item.content}}</label>
						<!-- 右侧删除按钮
						给按钮添加点击事件（事件内部把数据带进去）-->
						<button class="destroy" @click="removeLi(item)"></button>
					</div>
					<!-- 这里是双击修改事项内容的输入框
					使用v-model双向绑定事项内容
					添加@keyUp.esc事件用于取消编辑
				  添加@keyUp.enter和@blur事件用于保存编辑
				使用自定义事件，判断当前编辑事项是否是我-->
					<input class="edit" v-model="item.content" v-autofocus="item === editing" @keyUp.esc="cancelEditing(item)"
						@keyUp.enter="saveEdit(item)" @blur="saveEdit(item)">
				</li>
			</ul>
		</section>
		<!-- 底部功能区
			在这里使用v-show控制一下显示和隐藏，当事项列表为空则隐藏该区域
		-->
		<footer class="footer" v-show="todos.length">
			<!-- 左侧待完成事项统计区
				使用计算属性itemLeft
				第一个直接使用
				第二个判断未完成任务是否为1，是则直接使用单位，否则单位后加s
			-->
			<span class="todo-count"><strong>{{itemLeft}}</strong> {{itemLeft === 1 ? item : item + 's'}} left</span>
			<!-- 中间功能切换区域
			使用fliter值判断真假，实现类名的切换
		  添加点击事件，修改当前展示模式 -->
			<ul class="filters">
				<li>
					<a href="javascript:;" :class="{selected:fliter ==='all'}" @click="fliter = 'all'">全部</a>
				</li>
				<li>
					<a href="javascript:;" :class="{selected:fliter ==='active'}" @click="fliter = 'active'">未完成</a>
				</li>
				<li>
					<a href="javascript:;" :class="{selected:fliter ==='completed'}" @click="fliter = 'completed'">已完成</a>
				</li>
			</ul>
			<!-- 右侧清除已完成按钮的展示
				在这里使用计算属性itemLeft，使用全部事项 - 未完成事项就 = 已完成事项个数，已完成事项 > 0显示此按钮 
				这里添加事件clearCompleted（）用于删除所有已完成事件
			-->
			<button class="clear-completed" v-show="todos.length - itemLeft > 0" @click="clearCompleted()">清除已完成事项</button>
		</footer>
	</section>
	<!-- 底部固定显示区域 -->
	<footer class="info">
		<p>Double-click to edit a todo</p>
		<!-- Remove the below line ↓ -->
		<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
		<!-- Change this out with your name and url ↓ -->
		<p>Created by <a href="http://todomvc.com">you</a></p>
		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>
	<!-- Scripts here. Don't remove ↓ -->
	<!-- <script src="node_modules/todomvc-common/base.js"></script> -->
	<script src="./node_modules/vue/dist/vue.js"></script>
	<script src="js/app.js"></script>
</body>

</html>
